<script setup>
/**
 * 前端应用DEMO
 */
import { store } from '@/js/store.js';
import { ref, toRefs, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import mobileView from '@/pages/diymobile/view.vue';

const props = defineProps({
    hashName: String,
    form: {
        type: Object,
        default: {}
    }
});
//需要响应式时使用toRefs
//const { form } = toRefs(props);
//向父级传递消息
const emits = defineEmits(['tohost'])
function sindEmit() {
    emits('tohost', ...arguments);
}
//组件暴露自己的属性
defineExpose({
    init,
});
function init() {
    nextTick(()=>{
        if(!screenHeight){
            return;
        }
        store.screenTop = screenTop;
        store.screenHeight = screenHeight;
        mobileScroll.value.scrollTop = 0;
    });
}

//=========================屏幕滚动事件

const mobileScroll = ref(null)
var screenTop = 0, screenHeight = 0;
function onScroll(event) {
    // store.srcollTop = window.scrollTop;
    props.form.srcoll && (store.srcollTop = mobileScroll.value.scrollTop);
}
onMounted(()=>{
    nextTick(()=>{
        // store.screenHeight = window.clientHeight;
        // window.addEventListener('scroll', onScroll);
        store.screenTop = screenTop = mobileScroll.value.getBoundingClientRect().top;//窗口容器的位置（演示窗口需设置）
        store.screenHeight = screenHeight = mobileScroll.value.clientHeight;
        mobileScroll.value.scrollTop = 0;
        mobileScroll.value.addEventListener('scroll', onScroll);
    })
})
onBeforeUnmount(()=>{
    // window.removeEventListener('scroll', onScroll);
    mobileScroll.value.removeEventListener('scroll', onScroll);
})

const appArea = ref('iphone6');

//屏幕尺寸变化
watch(() => appArea, (newVal, oldValue) => {
    nextTick(()=>{
        store.screenHeight = screenHeight = mobileScroll.value.clientHeight;
    });
})

// 监听变化
watch(() => props.form, (newVal, oldValue) => {
    // appArea.value = 'iphone6'
    nextTick(()=>{
        store.screenTop = screenTop;
        store.screenHeight = screenHeight;
        mobileScroll.value.scrollTop = 0;
    });
},{
    immediate: true, // 组件创建时立即执行
    deep: true // 深度监听
})


</script>
<template>
    <div class="tools">
        <el-select v-model="appArea" placeholder="请选择" style="width: 200px;">
            <el-option label="iPhone 6/7/8" value="iphone6"></el-option>
            <el-option label="iPhone X/11/12/13/14" value="iphone10"></el-option>
            <el-option label="PC" value="pc"></el-option>
        </el-select>
        <el-button @click="sindEmit({close:true})">退出</el-button>
    </div>
    <hr>

    <div :class="['mobile-model innerbox', appArea]" ref="mobileScroll">

        <mobile-view :form="form"></mobile-view>

    </div>

</template>

<style scoped>
/* 模拟器样式 */
.mobile-model{margin: 0 auto; overflow-y: auto; width: 375px;height: 667px;background-color: white; border: black 8px solid; border-width: 16px 8px; box-shadow: rgba(0, 0, 0, 0.3) 0 8px 18px;border-radius: 22px;}
.iphone10{height: 812px;border-radius: 26px;}
.pc{width: 1200px;height: 100%;min-height: 800px;}
.tools{margin: 0 auto;width: 280px;}
</style>